<template>
  <div class="filter scrollbar">
    <ul class="tag-sex">
      <span class="tag-desc">Genres</span>
      <li
        v-for="item of Object.keys(filterList)"
        :key="item"
        :class="sexActive == item ? 'active' : ''"
        @click="chooseType('sex', item)"
        tag="li"
      >
        {{ item | capitalize }}
      </li>
    </ul>
    <ul class="tag-genre">
      <span class="tag-desc"></span>
      <li
        v-for="item of filterList[sexActive]"
        :key="item.name"
        :class="genreActive == item.categoryId ? 'active' : ''"
        @click="chooseType('genre', item)"
        tag="li"
      >
        {{ item.name | capitalize }}
      </li>
    </ul>
    <ul class="tag-state">
      <span class="tag-desc">State</span>
      <li
        v-for="item of stateList"
        :key="item.name"
        :class="stateActive == item.id ? 'active' : ''"
        @click="chooseType('state', item)"
        v-text="item.name"
        tag="li"
      ></li>
    </ul>
  </div>
</template>

<script>
// import merge from "webpack-merge";
export default {
  props: {
    diff: {
      type: Array,
    },
    filterList: {
      type: Object,
    },
    // toName: {
    //   type: String,
    //   default: "librarySort",
    // },
  },
  filters: {
    // 首字母大写
    capitalize(text) {
      return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
    },
  },
  computed: {
    sexActive() {
      return this.$route.params.sex;
    },
    genreActive() {
      return this.$route.params.genre;
    },
    stateActive() {
      return this.$route.params.state;
    },
  },
  data() {
    return {
      // Genres 频道
      stateList: [
        {
          id: "all",
          name: "All",
        },
        {
          id: 1,
          name: "Completed",
        },
        {
          id: 0,
          name: "Serial",
        },
      ],
      // 请求参数
      params: {},
    };
  },
  methods: {
    // 选择歌手分类
    chooseType(type, item) {
      let params;
      if (type === "sex") {
        if (item === this.sexActive) {
          params = Object.assign(this.$route.params, { sex: item });
        } else {
          params = Object.assign(
            this.$route.params,
            { sex: item },
            { genre: "all" }
          );
        }
      } else if (type == "genre") {
        params = Object.assign(this.$route.params, { genre: item.categoryId });
      } else if (type == "state") {
        params = Object.assign(this.$route.params, { state: item.id });
      }
      this.$router.push({ params });
      this.$emit("chooseType");
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.filter {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 40px 40px;
  background: #fff;
  > ul {
    width: 100%;
    height: 38px;
    padding-top: 40px;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    align-items: center;
    line-height: 30px;
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    .tag-desc {
      min-width: 145px;
      color: #999999;
      font-weight: 600;
    }
    > li {
      line-height: 38px;
      white-space: nowrap;
      margin-right: 30px;
      &.active {
        padding: 0 30px;
        color: #fff;
        background: #e86472;
        border-radius: 19px;
      }
    }
  }
}
</style>
